<template>
  <el-form-item :prop="prop" :label="label" :rules="rulesList">
    <el-select v-model="text" :placeholder="placeholder||placeholderText" v-bind="$attrs" :clearable="clearable" v-on="$listeners" @visible-change="dialogShow">
      <el-option v-for="(item, index) in options" :key="index" :label="item[optionKeyValue[0]]||item" :value="item[optionKeyValue[1]]!==undefined?item[optionKeyValue[1]]:item" :disabled="item[optionDisabled]" />
    </el-select>
  </el-form-item>
</template>

<script>
import { mixin } from './mixin'
export default {
  name: 'Select',
  mixins: [mixin],
  model: {
    prop: 'value',
    event: 'changeModel'
  },
  props: {
    value: null,

    clearable: {
      type: Boolean,
      default: true
    },
    options: Array,
    optionKeyValue: {
      type: Array,
      default: () => { return ['label', 'value'] }
    },
    optionDisabled: {
      type: String,
      default: 'disabled'
    }
  },
  data() {
    return {
      text: this.value,
      checkList: []
    }
  },
  watch: {
    text(val) {
      this.$emit('changeModel', val)
    },
    value(val) {
      this.text = val
      if (this.multiple) {
        this.checkList = val
      }
    }
  },
  created() {
    if (this.multiple) {
      this.checkList = this.text
    }
  },
  methods: {
    dialogShow(val) {
      if (val) {
        this.$emit('open', this.checkList)
      } else {
        this.$emit('close', this.checkList)
      }
    }
  }
}
</script>
